<template>
<div class="html">
 <div class="header">
    <span>用户姓名</span>
 </div>
 <div class="body">
  <div tabindex="1"> 
    <span style="font-size:30px;color:black;">一个月</span>
    <span style="display: flex;flex-direction: row;justify-content: center"> <a style="font-size:15px;margin-right: -15px;color: black;">￥30</a><a style="width: 30px;border-bottom: 3px solid black;height: 10px;margin-left: -15px;"></a></span>
  </div>
  <div tabindex="2"></div>
  <div tabindex="3"></div>
  <div tabindex="4"></div>
  <div tabindex="5"></div>
 </div>
 <div class="footer"></div>
</div>
</template>
<script>
 export default {
name:'vip'
 }
</script>

<style scoped lang="less">
.html{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 550px;
    width: 100%;
}
.header{
    width: 30%;
    display: flex;
    justify-content:flex-start;
    align-items: center;
    height: 70px;
}
.footer{
    width: 100%;
    height: 100px;
    background-color: blue;
}
.body{
    width: 100%;
    height: 250px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    div{
      background-color:white;
       border: 1px solid black;
       border-radius:5%;
       width: 200px;
       height: 250px;
       display: flex;
       flex-direction: column;
       justify-content: center;
       span{
        text-align: center;
             width: 200px;
            height: 60px;
       }
    }
    div:focus{
        background-color:black;
    }
}
 
</style>